<template>
  <!-- 三级分类 组件 -->
  <div class="H_S_three">
    <div class="three_type">类别/等级</div>
    <div
      class="crid_item"
      v-for="item in currentThreeData"
      :key="item.id"
      @click="handleCutGrade(item)"
    >
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-kongbaiye"></use>
      </svg>
      <!-- 已选状态 -->
      <svg
        class="hove_icon icon"
        aria-hidden="true"
        v-if="selectStatus(item.id)"
      >
        <use xlink:href="#icon-duigouxiao"></use>
      </svg>
      <span>{{ item.text }}</span>
    </div>
  </div>
</template>

<script>
// import { ref } from "@vue/reactivity";
import { useStore } from "vuex";
import { computed } from "@vue/runtime-core";
export default {
  setup() {
    const store = useStore();
    //    根据二级分类id拿取三级分类对应分类data
    const currentThreeData = computed(() => {
      return store.getters["testKind/currentThreeData"];
    });
    // 切换三级分类及重新获取对应数据
    const handleCutGrade = (value) => {
      store.commit("testKind/setGradeThree", value);
    };
    // 匹配对应状态样式
    const selectStatus = computed(() => (id) => {
      // 拿取当前三级分类的id
      let temp = store.state.testKind.putKind[2].id;
      return temp === id;
    });

    return { currentThreeData, handleCutGrade, selectStatus };
  },
};
</script>

<style lang="less" scoped>
.icon {
  width: 2.6em;
  height: 2.6em;
  vertical-align: -0.15em;
  fill: currentColor;
}
.hove_icon {
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  top: 0;
  right: 0;
}
.H_S_three {
  position: relative;
  padding-top: 1.5rem;
  width: 95%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  border-radius: 0.6rem;
  margin: 0.5rem auto 0.5rem;
  box-sizing: border-box;
  border: 1px solid #bababa;
  .three_type {
    position: absolute;
    top: 0;
    font-size: 1rem;
    font-weight: bold;
    color: #2a2929;
    margin: 0.5rem 0;
    letter-spacing: 0.2rem;
  }
  .crid_item {
    position: relative;
    width: 5.1rem;
    height: 4rem;
    margin: 0.7rem 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    span {
      font-size: 0.85rem;
      font-weight: 500;
      color: #656464;
      margin: 0.2rem 0;
    }
  }
}
</style>
